<script setup lang="ts">
import { NamedPreset, PickerWithPresetsProps } from './common/pickerProps';
import { useEntryStyles } from './common/useEntryStyles';
import AuColorPicker from './AuColorPicker.vue';
import { onBeforeMount, ref, watch } from 'vue';
import { isValidHex } from './utils/isValidHex';
import { myProperHex } from './utils/myProperHex';
import { usePanelStyles } from './common/usePanelStyles';

const props = defineProps<PickerWithPresetsProps>()
const { hexValue, panelShow, closePanel, togglePanel, entryStylesActual } = useEntryStyles(props)
const { panelStyles } = usePanelStyles(props)

const selectedPreset = ref<string>()
const customPicker = ref<InstanceType<typeof AuColorPicker>>()
const customHexValue = ref<string>('#ff0000')
function presetClickHandler(p?:NamedPreset, suppressEmit?:boolean){
    if(p){
        selectedPreset.value = p.name
        hexValue.value = p.colorHex
    }else{
        selectedPreset.value = undefined
        hexValue.value = customHexValue.value
    }
    if(!suppressEmit)
        emit('presetSwitched', p?.name)
}

const emit = defineEmits<{
    (e:'change', hexStr:string):void
    (e:'done', hexStr:string):void
    (e:'presetSwitched', name:string|undefined):void
}>()
function customChangeHandler(hexStr:string){
    hexValue.value = hexStr
    customHexValue.value = hexStr
    emit('change', hexStr)
}
function customDoneHandler(hexStr:string){
    hexValue.value = hexStr
    customHexValue.value = hexStr
    closePanel()
}
function enforceCustomValueTo(newHexValue:string){
    if(isValidHex(newHexValue)){
        const hex = myProperHex(newHexValue)
        customHexValue.value = hex
        customPicker.value?.enforceTo(hex)
        if(!selectedPreset.value){
            hexValue.value = hex
        }
    }
}
function enforcePresetTo(name?:string){
    if(!name)
        presetClickHandler(undefined, true)
    const target = props.presets?.find(x=>x.name===name)
    if(target){
        presetClickHandler(target, true)
    }
}

defineExpose({closePanel, enforceCustomValueTo, enforcePresetTo})
watch(panelShow, newval=>{
    if(newval===false){
        emit('done', hexValue.value)
    }
})
onBeforeMount(()=>{
    if(props.initial){
        enforceCustomValueTo(props.initial)
    }
    if(props.initialSelectedPreset){
        enforcePresetTo(props.initialSelectedPreset)
    }
})
</script>

<template>
    <div class="acp">
        <div class="acpEntry" :style="entryStylesActual" @click="togglePanel"></div>
        <div class="acpPanel" v-if="panelShow" :style="panelStyles" @click="e=>panelClickStopPropagation && e.stopPropagation()">
            <div class="acpNamedPresets">
                <label for="acpColorPresetCustom">
                    <AuColorPicker :initial="customHexValue" @change="customChangeHandler" @done="customDoneHandler"
                        :entry-class-name="'acpPresetBody'" ref="customPicker" :show-package-name="showPackageName" :pos="posInternal"></AuColorPicker>
                    <input name="colorType" type="radio" id="acpColorPresetCustom" :value="undefined"
                        v-model="selectedPreset" @click="presetClickHandler()"/>
                    <div class="acpPresetName">自定义</div>
                </label>
                <div class="acpSep"></div>
                <label v-for="p in presets" :for="`acpColorPreset${p.name}`">
                    <div class="acpPresetBody" :style="{ backgroundColor: p.colorHex }"></div>
                    <input name="colorType" type="radio" :id="`acpColorPreset${p.name}`" :value="p.name"
                        v-model="selectedPreset" @click="presetClickHandler(p)"/>
                    <div class="acpPresetName">{{ p.name }}</div>
                </label>
                <div class="acpSep"></div>
            </div>
            <div class="acpDoneBtn">
                <button @click="closePanel">OK</button>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
@use '../style.scss';

.acpNamedPresets{
    margin: 5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.acpNamedPresets>*{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    .acpPresetName{
        color: #666;
        &:hover{
            color: #000
        }
    }
}
</style>